JQuery

How to get the index of an item in a selection in JQuery?

How to get the index of an item in a selection in JQuery?, someone asked me to explain?
By:

If we have wide range selected of elements on a page and we need to point out exactly which selected element was clicked using index() method.

In the following example, we are binding all div elements to a click event.

Example:

<html>
<head>
    <title>getting index of an item in a selection in jQuery</title>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        (function ($) {
            $(document).ready(function () {
                $("div").click(function () {
                    alert("You clicked on div with an index of " +
                    $("div").index(this));
                });
            })
        })(jQuery);
    </script>
    <style type="text/css">
        div {
        width:450px;
        height:75px;
        color:white;
        text-align:center;
        font-size:17px;
        padding:5px 5px 5px 5px;
        }
    </style>
</head>
<body style="padding-left:150px">
   <div style="background-color:blue;">click me</div>
<div style="background-color:green">click me</div>
<div style="background-color:red">click me</div>
</body>
</html> 

Output:

Getting the Index of an Item in a Selection

Related Article

Post your comments / questions



Recent Article